{% extends 'base.html' %}

{% block head %}
<title>register</title>
{% endblock %}

{% block body %}
	<div class="content">
		<button onclick="gotologin()">login</button> <br><br>
		<input id="username" type="text" name="username" placeholder="username"> <br><br>
		<input id="passwd" type="password" name="password" placeholder="password"> <br><br>
		<input id="passwd2" type="password" name="password2" placeholder="password again"> <br><br>
		<input type="radio" name="permission" value="2" checked> viewer
		<input type="radio" name="permission" value="0"> actor 
		<input type="radio" name="permission" value="1"> actress 
		<br><br>
		<button onclick="register()">register</button>
	</div>
	<script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
	<script>
		function gotologin() { window.location = '/'; }
		function register() {
			var reg = new RegExp('^(?![a-zA-Z]+$)(?![0-9]+$)[A-Za-z0-9]{8,18}$');
			var username = $('#username').val().trim();
			var passwd = $('#passwd').val().trim();
			var passwd2 = $('#passwd2').val().trim();
			// get checked radio
			var type = $('input[name=permission]:checked').val()
			//console.log(username);
			//console.log(passwd);
			//console.log(passwd2);
			//console.log(type);
			if (username == '') { alert('username can`t be empty'); return; }
			else if (passwd == '') { alert('password can`t be empty'); return; }
			else if (passwd2 == '') { alert('password again can`t be empty'); return; }
			else if (passwd !== passwd2) {alert('twice password not the same'); return;}
			else if (!(reg.test(passwd))) { alert('password can`t be lawful'); return; }
			else {
				$.post({
					url: "/register",
					data: {"username": username, "password": passwd, "permission": type},
					success: function (data) {
						//console.log(data)
						data = JSON.parse(data);
						//console.log(data);
						alert(data.message);
						if (data.is) {
							window.location = '/';
						}
					}
				})
			}
		}
	</script>
{% endblock %}
